<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav title">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
       style="color: #C8C7CC;"></a>
    <a id="openMenu" href="#sheet" class="mui-icon mui-icon-settings mui-pull-right"
       style="color: #C8C7CC;"></a>
    <h1 class="mui-title title-color">设置头像</h1>
</header>
<div class="mui-content">
    <img id="img_myface" src=""/>
</div>

<!--点击右上角按钮后弹出的菜单-->
<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="ling_choosePhoto" href="#">上传头像</a>
        </li>
        <li class="mui-table-view-cell">
            <a id="down_choosePhoto" href="#">下载头像</a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet"><b>取消</b></a>
        </li>
    </ul>
</div>


<script src="js/app.js"></script>
<script src="js/mui.js"></script>
<script type="text/javascript">
    mui.init();
    mui.plusReady(function () {
        refreshUserInfo();
        var user = app.getUserGlobalInfo();
        if (app.isNotNull(user.faceImage)) {
            console.log("有头像");
        } else {
            app.showToast("未上传头像,请选择头像", "error");
						console.log("没头像");
            //选择 裁剪 上传
            mui.openWindow({url: "plugin/v3.1.6/myface-uploader.html", id: "myface-uploader.html", createNew: true});
        }


        /* var openMenu = document.getElementById("openMenu");
        openMenu.addEventListener("tap",function(){
            //mui('#sheet1').popover('toggle');
        }); */

        //绑定上传头像的按钮
        var ling_choosePhoto = document.getElementById("ling_choosePhoto");
        ling_choosePhoto.addEventListener("tap", function () {
            //选择 裁剪 上传
            mui.openWindow({url: "plugin/v3.1.6/myface-uploader.html", id: "myface-uploader.html", createNew: true});
            //隐藏当前窗口
            mui('#sheet').popover('toggle');
        });

        //绑定下载头像的按钮
        var down_choosePhoto = document.getElementById("down_choosePhoto");
        down_choosePhoto.addEventListener("tap", function () {
                //隐藏当前窗口
                mui('#sheet').popover('toggle');
                //显示等待框
                plus.nativeUI.showWaiting("下载中...");
                //下载图片
                var user = app.getUserGlobalInfo();
                if (user != null) {
                    var dtast = plus.downloader.createDownload(
                        app.imgServerUrl + user.faceImageBig,
                        {},
                        function (downloadFile, status) {
                            if (status == 200) {
                                //临时文件
                                var tempFile = downloadFile.filename;
                                //保存照片到相册
                                plus.gallery.save(tempFile, function () {
                                        //关闭等待框
                                        plus.nativeUI.closeWaiting();
                                        app.showToast("保存照片成功", "success");
                                    }
                                );
                            } else {
                                //关闭等待框
                                plus.nativeUI.closeWaiting();
                                app.showToast("下载失败,请稍后重试", "error");
                                console.log("下载失败");
                            }
                        }
                    );
                    dtast.start();
                } else {
                    //如果登录信息失效则返回登录页面
                    app.returnLogin();
                    //关闭等待框
                    plus.nativeUI.closeWaiting();
                }
            }
        )


    });

    //添加自定义事件,刷新头像
    window.addEventListener("refresh", function () {
        //刷新
        refreshUserInfo();
    });


    //刷新用户信息
    function refreshUserInfo() {
        var user = app.getUserGlobalInfo();
        //如果用户信息不为空则刷新信息
        if (user != null) {

            var faceImageBig = user.faceImageBig;
            var img_myface = document.getElementById("img_myface");

            //如果头像不为空则刷新头像
            if (app.isNotNull(faceImageBig)) {
                img_myface.src = app.imgServerUrl + faceImageBig;
            }
            //获取系统宽度
            var imgWidth = document.body.clientWidth;
            //设置图片显示长款,最终显示为一个正方形
            img_myface.width = imgWidth;
            img_myface.hitgh = imgWidth;
        } else {
            //如果登录信息失效则返回登录页面
            app.returnLogin();
        }
    };

    function closeMemu() {
        mui('#sheet1').popover('toggle');
    }
</script>
</body>

</html>
